<!-- 指标占比（右） -->
<template>
  <div class="course-indicators">
    <div class="course">
      <div class="title">
        课程销售核心指标
      </div>
      <div class="course-content">
        <div class="content" style="background-color: #5bb3a8;margin-left:4px;">
          <div class="num">{{ toThousands(coreIndex.order) }}</div>
          <div class="ti">订单量 </div>
        </div>
        <div class="content" style="background-color: #c38c55;margin-right:4px;margin-left:1px;">
          <div class="num">{{ toThousands(coreIndex.sales) }}</div>
          <div class="ti">销售额 </div>
        </div>
      </div>
    </div>
    <div class="indicators">
      <div class="title">
        购课类别占比
      </div>
      <div class="indicators-content" ref="chart">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 父组件传入 课程销售核心指标和购课类别占比 的数据
  props: ['coreIndex','buyCourse'],
  //图表实例
  mounted() {
    this.init()
  },
  methods: {
    // 将订单量和销售额的数据转换为每三位带逗号的数据
    toThousands(num) {
      var str = (num || 0).toString();
      var newStr = "";
      var count = 0;
      if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr;
          }
          count++;
        }
        return newStr;
      }
      else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr; //逐个字符相接起来
          }
          count++;
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
       return str;
      }
    },

    init() {
      //2.基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          valueFormatter: (value) => (value / 10000).toFixed(2) + '万',
          textStyle: {
            color: '#fefdfd'
          }
        },
        color: ['#5bb0aa', '#c39755', '#d16056', '#6b455f'],
        series: [
          {
            type: 'pie',
            radius: ['25%', '60%'],
            data: this.buyCourse,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.course-indicators {
  width: 100%;
  height: 386px;

  .course {
    height: 121px;
    margin-bottom: 15px;
    width: 100%;
    background-color: #ffffff;

    .course-content {
      display: flex;

      .content {
        flex: 1;
        width: 50%;
        margin-top: 4px;
        margin-bottom: 4px;
        height: 73px;
      }

      .num {
        font-size: 30px;
        color: rgb(255, 255, 255);
        margin-top: 8px;
        margin-bottom: 6px;
        text-align: center;
      }

      .ti {
        font-size: 16px;
        color: rgb(255, 255, 255);
        text-align: center;
      }
    }
  }

  .indicators {
    width: 100%;
    height: 250px;
    background-color: #ffffff;

    .indicators-content {
      height: 210px;
    }
  }

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }
}
</style>